﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mfAddOrder.aspx.cs" Inherits="msBsc.WebUi.mMall.Buyer.mfAddOrder" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>手机地接客商城</title>
    <%=getMeta()%>
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/mGlobal.css" charset="gbk" />
    <link rel="stylesheet" type="text/css" href="/themes/mStyle1/css/home/base.css" charset="gbk" />
    <link href="/jqPlugin/laydate/skins/default/laydate.css" rel="stylesheet" charset="gbk" />
    <link href="/themes/mStyle1/css/public/mOrder.css" rel="stylesheet" />
    <%=getBodyBeforeJs()%>

    <script type="text/javascript" src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/jBase.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/jmPage.js"></script>
    <script type="text/javascript" src="/themes/Style1/jsQt.js"></script>
    <script type="text/javascript" src="/jqPlugin/js/laytpl.js"></script>
    <script type="text/javascript" src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script type="themes/wStyle1/js/comm/DateInfo.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
        });
        //        $(window).bind('resize', function () { _self._ResizeHandler(_self); })
        //        .bind('scroll', function () { _self._ResizeHandler(_self); });
    </script>
    <!--head fix rgn-->
    <style type="text/css">
       
    </style>
    <base target="_self" />
</head>
<body>
    <div class="viewport">
        <%=msBsc.WebUi.Code.QtHtmlGet.GetWapHeaderMenuHtml(true) %>
        <form action='#' method="post" id="J_EmailForm">
            <input type="hidden" id="vehicleId" />
            <input type="hidden" id="djackId" />
            <div id="c_order" class="c_order">
                <div class="order_comm">
                    <div class="fl_order_comm">订单信息</div>
                    <div class="fr_order_comm">
                        <a id="online_chat" class="onle_chat" title="在线联系"></a>
                    </div>
                </div>
                <div class="order_comm">
                    <div class="l_order_user">
                        <a id="djack_c_img" class="l_order_user_href">
                            <img id="djack_img" /></a>
                    </div>
                    <div class="r_order_user">
                        <a id="djack_name" class="r_order_user_href"></a>
                    </div>
                </div>
                <div class="order_time">
                    <div class="l_order_time"><span>开始时间:</span></div>
                    <div class="c_order_time">
                        <input type="text" placeholder="请选择开始时间" id="start" readonly="readonly" />
                    </div>
                    <div class="r_order_time">
                        <span></span>
                    </div>
                </div>

                <div class="order_time">
                    <div class="l_order_time"><span>结束时间:</span></div>
                    <div class="c_order_time">
                        <input type="text" placeholder="请选择结束时间" id="end" readonly="readonly" />
                    </div>
                    <div class="r_order_time">
                        <span></span>
                    </div>
                </div>
                <div id="vehicle_list">
                    <%--<div class="order_vehicle_info">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">福田蒙派克S豪华型</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price">1500.00￥/天</div>
                                <div class="delete_vehice"><a>删除</a></div>
                            </div>
                        </div>
                    </div>

                    <div class="order_vehicle_info">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">福田蒙派克S豪华型</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price">1500.00￥/天</div>
                                <div class="delete_vehice"><a>删除</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="order_vehicle_info">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">福田蒙派克S豪华型</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price">1500.00￥/天</div>
                                <div class="delete_vehice"><a>删除</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="order_vehicle_info">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">福田蒙派克S豪华型</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price">1500.00￥/天</div>
                                <div class="delete_vehice"><a>删除</a></div>
                            </div>
                        </div>
                    </div>--%>
                </div>

                <div class="order_add">
                    <div class="btn_c_add" onclick="addVehicle()"><i class="ioc_add"></i><span class="txt_add">添加车辆</span></div>
                </div>

            </div>
            <div class="order_bottom">
                <div class="lb_order">
                    <span class="lb_title">合计:</span><span id="total" class="lb_content">￥5000.00</span>
                </div>
                <div class="rb_order">
                    <a class="btn_submit" id="submitOrder" onclick="submitOrder()">提交订单</a>
                </div>
            </div>

            <div id="djk_vehicleList" style="display: none; margin-bottom: 56px;">
                <div>正在加载...</div>
                <%-- <div class="c_add_vehicel_list">
                    <div class="add_vehicle_check">
                        <input type="checkbox" name="checkVehicle" class="check_vehicle" />
                    </div>
                    <div class="add_vehicle_info">
                        <div class="order_vehicle_info">
                            <div class="l_ovi">
                                <div class="c_l_ovi">
                                    <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                                </div>
                            </div>

                            <div class="r_ovi">
                                <div>
                                    <a class="n_vehicle">福田蒙派克S豪华型</a>
                                </div>
                                <div>
                                    <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                                </div>
                                <div class="other_vInfo">
                                    <div class="vehicle_price">1500.00￥/天</div>
                                    <div class="delete_vehice"><a>删除</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c_add_vehicel_list">
                    <div class="add_vehicle_check">
                        <input type="checkbox" name="checkVehicle" class="check_vehicle" />
                    </div>
                    <div class="add_vehicle_info">
                        <div class="order_vehicle_info">
                            <div class="l_ovi">
                                <div class="c_l_ovi">
                                    <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                                </div>
                            </div>

                            <div class="r_ovi">
                                <div>
                                    <a class="n_vehicle">福田蒙派克S豪华型</a>
                                </div>
                                <div>
                                    <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                                </div>
                                <div class="other_vInfo">
                                    <div class="vehicle_price">1500.00￥/天</div>
                                    <div class="delete_vehice"><a>删除</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c_add_vehicel_list">
                    <div class="add_vehicle_check">
                        <input type="checkbox" name="checkVehicle" class="check_vehicle" />
                    </div>
                    <div class="add_vehicle_info">
                        <div class="order_vehicle_info">
                            <div class="l_ovi">
                                <div class="c_l_ovi">
                                    <img src="http://www.dijieke.com/UpLoad/System/1505/19/ec43ce89f991e89d.jpg  196x140img.jpg" />
                                </div>
                            </div>

                            <div class="r_ovi">
                                <div>
                                    <a class="n_vehicle">福田蒙派克S豪华型</a>
                                </div>
                                <div>
                                    <span class="info_vehicle" style="">司机兼向导 / 10座</span>
                                </div>
                                <div class="other_vInfo">
                                    <div class="vehicle_price">1500.00￥/天</div>
                                    <div class="delete_vehice"><a>删除</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>--%>
            </div>

            <div id="add_vehicle" class="order_bottom" style="display: none">
                <div class="cb_order">
                    <a class="btn_submit" id="checkVehicle">确认添加<i id="vehicle_number">(0)</i></a>
                </div>

            </div>

            <xmp id="svc_list_temp_vehicle" style="display: none">
             {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
             <div class="order_vehicle_info" data-value="{{d.rows[i].VEHICLE_INFO_ID}}">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="{{d.rows[i].VEHICLE_DEFAULT_PIC}}  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">{{d.rows[i].VEHICLE_NAME}}</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">{{d.rows[i].VEHICLE_SERVICE_TYPE}} / {{d.rows[i].VEHICLE_SEATS}}坐</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price"><span class="v_price">{{d.rows[i].VEHICLE_PRICE_DAY}}</span>￥/天</div>
                                <div class="delete_vehice"><a onclick="deleteVehicle('{{d.rows[i].VEHICLE_INFO_ID}}')">删除</a></div>
                            </div>
                        </div>
                    </div>
                                
            {{#} }}
                           </xmp>

            <xmp id="svc_add_temp_vehicle" style="display: none">
             {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
                 <div class="c_add_vehicel_list">
                    <div class="add_vehicle_check">
                        <input type="checkbox" name="checkVehicle" class="check_vehicle" data-value="{{d.rows[i].VEHICLE_INFO_ID}}" />
                    </div>
                    <div class="add_vehicle_info">
             <div class="order_vehicle_info" data-value="{{d.rows[i].VEHICLE_INFO_ID}}">
                        <div class="l_ovi">
                            <div class="c_l_ovi">
                                <img src="{{d.rows[i].VEHICLE_DEFAULT_PIC}}  196x140img.jpg" />
                            </div>
                        </div>

                        <div class="r_ovi">
                            <div>
                                <a class="n_vehicle">{{d.rows[i].VEHICLE_NAME}}</a>
                            </div>
                            <div>
                                <span class="info_vehicle" style="">{{d.rows[i].VEHICLE_SERVICE_TYPE}} / {{d.rows[i].VEHICLE_SEATS}}坐</span>
                            </div>
                            <div class="other_vInfo">
                                <div class="vehicle_price"><span class="v_price">{{d.rows[i].VEHICLE_PRICE_DAY}}</span>￥/天</div>
                                <div class="delete_vehice"><a onclick="deleteVehicle('{{d.rows[i].VEHICLE_INFO_ID}}')">删除</a></div>
                            </div>
                        </div>
                    </div>
                        </div>
                     </div>
                                
            {{#} }}
                           </xmp>
        </form>
        <script type="text/javascript" src="/jqPlugin/laydate/laydate.js" charset="gbk"></script>
        <script src="/themes/wStyle1/js/comm/DateInfo.js"></script>
        <script type="text/javascript">
            var start = {
                elem: '#start',
                format: 'YYYY-MM-DD hh:mm',
                min: laydate.now(), //设定最小日期为当前日期
                max: '2099-06-16 23:59:59', //最大日期
                istime: true,
                istoday: false,
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                    computingPrice();
                }
            };
            var end = {
                elem: '#end',
                format: 'YYYY-MM-DD hh:mm',
                min: laydate.now(),
                max: '2099-06-16 23:59:59',
                istime: true,
                istoday: false,
                choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                    computingPrice();
                }
            };
            laydate(start);
            laydate(end);
            (function () {
                $("#h_title").text("下订单");
                $("#vehicleId").val(GetQueryStr("carid"));
                $("#checkVehicle").live("click", function () {
                    checkVehicle();
                })
                $.getMessageCount();
                change();
            })();

            function btnDo(sEbtn) {
                var opart = new jsonRow();
                opart.AddCell("ACTION", sEbtn);
                if (sEbtn == "init") {
                    opart.AddCell("vehicleId", $("#vehicleId").val());
                }
                else if (sEbtn == "getVehicle") {
                    opart.AddCell("djackId", $("#djackId").val());
                }
                ajaxComm(opart);
            }
            btnDo("init");
            //初始化
            function init(data) {
                if (IsNull(data) || IsNull(data.rows)) {
                    return;
                }
                $("#online_chat").attr("href", "/mb_ChatMessage.htm?receiveId=" + data.rows[0].DJACK_ID + "&receiveName=" + data.rows[0].CUSTOMER_NICK);
                $("#djackId").val(data.rows[0].DJACK_ID);
                $("#djack_img").attr("src", data.rows[0].CUSTOMER_DEFAULT_PIC);
                $("#djack_c_img").attr("href", "/mp_DjackVehicle.htm?djackId=" + data.rows[0].DJACK_ID);
                $("#djack_name").attr("href", "/mp_DjackVehicle.htm?djackId=" + data.rows[0].DJACK_ID);
                $("#djack_name").text(data.rows[0].CUSTOMER_NICK);
                var _html = $('#svc_list_temp_vehicle').html();

                laytpl(_html).render(data, function (render) {
                    $('#vehicle_list').html(render);
                });
                computingPrice();
            }

            //移除车辆
            function deleteVehicle(vehicleId) {
                if (IsNull(vehicleId)) {
                    return;
                }
                if ($("#vehicle_list .order_vehicle_info").length <= 1) {
                    alert("订单中至少需要一辆车");
                    return;
                }
                $("#vehicle_list .order_vehicle_info[data-value=" + vehicleId + "]").remove();
                computingPrice();
            }
            function addVehicle() {
                $("#c_order").hide();
                $("#djk_vehicleList").show();
                $("#add_vehicle").show();
                $("#h_title").text("添加车辆");
                btnDo("getVehicle");
            }

            function change() {
                $(".check_vehicle").live("change", function () {
                    var v_number = $(".check_vehicle:checked").length;
                    $("#vehicle_number").text("(" + v_number + ")");
                });
            }

            //显示在售车辆
            function showVehicle(data) {
                var _html = $('#svc_add_temp_vehicle').html();

                laytpl(_html).render(data, function (render) {
                    $('#djk_vehicleList').html(render);
                });
                var checkList = $("#vehicle_list .order_vehicle_info");
                $.each(checkList, function (i, item) {
                    var checkedValue = $(this).attr("data-value");
                    $(".check_vehicle[data-value=" + checkedValue + "]").attr("checked", "checked");
                });
                $("#vehicle_number").text("(" + checkList.length + ")");
            }

            function checkVehicle() {
                var checkeList = $(".check_vehicle:checked");
                if (checkeList.length < 1) {
                    alert("订单至少需要选择一辆车");
                    return;
                }
                $("#vehicle_list").html("");
                $.each($(".check_vehicle:checked"), function (i, item) {
                    var html = $(this).parent().siblings(".add_vehicle_info").html();
                    $("#vehicle_list").append(html);
                });
                $("#c_order").show();
                $("#djk_vehicleList").hide();
                $("#add_vehicle").hide();
                $("#h_title").text("下订单");
                computingPrice();
            }

            //计算价格
            function computingPrice() {
                var startTime = $("#start").val();
                var stopTime = $("#end").val();
                var tNum = 1;
                var total = 0.00;
                if (IsNull(startTime) || IsNull(stopTime)) {
                    tNum = 1
                }
                else {
                    startTime = startTime.replace(/-/g, "/");
                    stopTime = stopTime.replace(/-/g, "/");
                    var sTime = formatDate(new Date(startTime), false);
                    var tTime = formatDate(new Date(stopTime), false);
                    tNum = parseInt(new Date(tTime).getTime() - new Date(sTime).getTime()) / 1000 / 60 / 60 / 24 + 1;
                    if (tNum < 1) {
                        tNum = 1;
                    } else if (tNum > 1) {
                        var stopTemp = stopTime.split(" ");
                        var arrStopTemp = stopTemp[1].split(":");
                        if (arrStopTemp[0] == "00" && arrStopTemp[1] == "00") {
                            tNum -= 1;
                        }
                    }
                }

                $.each($("#vehicle_list .v_price"), function (i, item) {
                    var s_price = $(this).text();
                    total += tNum * parseFloat(s_price);
                });
                $("#total").text("￥" + total.toFixed(2));
            }

            function submitOrder() {
                if ($("#submitOrder").text() == "正在提交") {
                    return;
                }
                var vIds = "";
                $.each($("#vehicle_list .order_vehicle_info"), function (i, item) {
                    if (i > 0) {
                        vIds += "|";
                    }
                    var v_Id = $(this).attr("data-value");
                    vIds += v_Id;
                });
                if (IsNull(vIds)) {
                    alert("请选择车辆");
                    return;
                }
                var startTime = $("#start").val();
                if (IsNull(startTime)) {
                    alert("请选择开始服务时间");
                    return;
                }
                var stopTime = $("#end").val();
                if (IsNull(stopTime)) {
                    alert("请选择结束服务时间");
                    return;
                }
                if (!isStartEndDate(startTime, stopTime)) {
                    alert("开始服务时间必须小于结束服务时间");
                    return;
                }
                $("#submitOrder").text("正在提交");
                var opart = new jsonRow();
                opart.AddCell("ACTION", "setOrder");
                opart.AddCell("oIds", vIds);
                opart.AddCell("startTime", startTime);
                opart.AddCell("stopTime", stopTime);
                ajaxComm(opart);
                $("#submitOrder").text("提交订单");
            }

            function isStartEndDate(startDate, endDate) {
                //alert(startDate +"==="+ endDate);   

                if (startDate.length > 0 && endDate.length > 0) {
                    var startDateTemp = startDate.split(" ");
                    var endDateTemp = endDate.split(" ");
                    var arrStartDate = startDateTemp[0].split("-");
                    var arrEndDate = endDateTemp[0].split("-");
                    var arrStartTime = startDateTemp[1].split(":");
                    var arrEndTime = endDateTemp[1].split(":");
                    var allStartDate = new Date(arrStartDate[0], arrStartDate[1], arrStartDate[2], arrStartTime[0], arrStartTime[1]);
                    var allEndDate = new Date(arrEndDate[0], arrEndDate[1], arrEndDate[2], arrEndTime[0], arrEndTime[1]);
                    if (allStartDate.getTime() >= allEndDate.getTime()) {
                        return false;
                    }
                }
                return true;
            }
        </script>
    </div>
</body>
<%=getBodyAfterJs() %>
</html>
